<template>
	<view class="indexContainer">
		<!-- 录播图区域 -->
		<swiper class="swiperContainer" indicator-dots indicator-color="#fff" indicator-active-color="#d43c33" autoplay interval="2000" circular>
			<swiper-item v-for="(item,index) in bannerList" :key="index" >
				<image src="{{item.imageUrl}}"></image>
			</swiper-item>
		</swiper>

		<!-- 图标区域 -->
		<view class="iconContainer">
			<view class="boxItem">
				<view class="iconfont icon-tuijian"></view>
				<text class="title">每日推荐</text>
			</view>
			<view class="boxItem">
				<view class="iconfont icon-other"></view>
				<text class="title">其他</text>
			</view>
			<view class="boxItem">
				<view class="iconfont icon-paihangbang"></view>
				<text class="title">排行榜</text>
			</view>
			<view class="boxItem">
				<view class="iconfont icon-diantaizhibo"></view>
				<text class="title">电台</text>
			</view>
			<view class="boxItem">
				<view class="iconfont icon-zhibo"></view>
				<text class="title">直播</text>
			</view>
		</view>

		<!-- 推荐歌曲区域 -->
		<view class="recommendContainer">
			<!-- header区域 -->
			<nav-header class="recommendHeader" title="推荐歌曲" contant="为你精心推荐"></nav-header>
			<scroll-view class="recommendBox" scroll-x enable-flex >
				<view class="recommendItem" v-for="(item,index) in recommendList" :key="index">
				<view class="img">
					<image src="{{item.picUrl}}" mode="" />
				</view>
				<text class="recommendReason">
					{{item.name}}
				</text>
			</view>
			</scroll-view>
			
		</view>
		
		<!-- 排行榜区域 -->
		<view class="goodContainer">
			<nav-header title="排行榜" contant="热歌风向标"></nav-header>
			<swiper class="goodBox" autoplay circular previous-margin="40rpx" next-margin="60rpx">
				<swiper-item class="swiperItem" v-for="(item,index) in topList" :key="index">
					<text>{{item.name}}</text>
					<view class="boxItem" v-for="(childItem,childIndex) in item.tracks" :key="childIndex">
						<image src="{{childItem.al.picUrl}}" mode="" />
						<text class="index">{{childIndex+1}}</text>
						<text class="songName">{{childItem.name}}</text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
import request from "../../../request/request"
import navHeader from "../../components/navHeader/navHeader.vue"
	export default {
		data() {
			return {
				// 轮播图数据
				bannerList:[],
				// 推荐数据
				recommendList:[],
				// 排行榜数据
				topList:[]
			}
		},
		components:{
			navHeader
		},
		onLoad() {
			this.getBannerListInfo()
			// console.log(this.bannerList);
			this.getRecommendInfo()

			this.getTopListInfo()
			
			
			
		},
		methods: {
			async getBannerListInfo() {
				let bannerListInfo=await request('/banner',{type:2})
				// console.log(bannerListInfo);
				this.bannerList=bannerListInfo.banners
				// console.log(this.bannerList.length);
				
			},
			async getRecommendInfo() {
				let recommendInfo=await request('/personalized?',{limit:10})
				// console.log(recommendInfo.result);
				this.recommendList=recommendInfo.result
			},
			async getTopListInfo() {
				// let resultArr=[]
				for (let i=0;i<6;i++) {
					let topListInfo=await request('/top/list',{
					idx:i
				})
				let topListItem={name:topListInfo.playlist.name,tracks:topListInfo.playlist.tracks.slice(0, 3)}
				// console.log(topListItem);
				this.topList.push(topListItem)
				}
				
			}
		}
	}
</script>

<style scoped>
	page{
		width: 100%;
		height: 100%;
	}
	.indexContainer{
		width: 100%;
		height: 100%;
		/* background-color: pink; */
	}

	.swiperContainer{
		background-color: pink;
		width: 100%;
		height: 300rpx;
	}

	.swiperContainer image{
		width: 100%;
		height: 100%;
	}

	.iconContainer{
		/* height: 160rpx; */
		margin-top: 20rpx;
		display: flex;
		justify-content: space-around;
	}

	.iconContainer .boxItem .iconfont{
		height: 100rpx;
		width: 100rpx;
		background-color: #d43c33;
		text-align: center;
		font-size: 50rpx;
		line-height: 100rpx;
		border-radius: 50%;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.iconContainer .boxItem .title{
		display: block;
		font-size: 24rpx;
		text-align: center;
		width: 100rpx;
	}

	.recommendContainer{
		margin-top: 30rpx;
	}

	.recommendItem{
		width: 200rpx;
		height: 300rpx;
		margin-right: 20rpx;
	}
	.recommendItem .img{
		width: 200rpx;
		height: 200rpx;
		
	}

	.recommendItem image{
		width: 100%;
		height: 100%;
	}

	.recommendItem .recommendReason{
		margin-top: 16rpx;
		font-size: 26rpx;
		overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient: vertical;
	}

	.recommendBox{
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		white-space: nowrap;
		height: 300rpx;
		
	}
	.goodContainer{
		margin-bottom: 10rpx;
	}

	.goodBox{
		height: 400rpx;
	}
	.swiperItem{
		width: 610rpx;
		/* height: 400rpx; */
		height: 800rpx;
	}
	.swiperItem .boxItem{
		width: 100%;
		height: 100rpx;
		display: flex;
		margin: 20rpx 0;
	}
	.swiperItem .boxItem image{
		width: 100%;
		height: 100%;
		flex: 1;
	}

	.swiperItem .boxItem .index{
		flex: 1;
		text-align: center;
		line-height: 100rpx;
	}

	.swiperItem .boxItem .songName{
		flex: 3;
		/* text-align: center; */
		line-height: 100rpx;
		font-size: 26rpx;
		overflow: hidden;
    	text-overflow:ellipsis;
        white-space: nowrap;
	}
</style>
